import * as React from 'react'
import tw, { styled } from 'twin.macro'

export const BoldIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M328 446h224.68C609.742 446 656 401.554 656 346.727v-9.454C656 282.446 609.742 238 552.68 238H328v208z m369.815 35.426C754.606 519.186 792 583.508 792 656.508v10.984C792 783.752 697.155 878 580.158 878h-318.67C245.202 878 232 864.798 232 848.512V169.39c0-15.127 12.263-27.39 27.39-27.39h295.9C663.93 142 752 229.267 752 336.915v10.17c0 52.073-20.609 99.378-54.185 134.341zM328 542.671V781.33h251.134c63.78 0 115.485-50.997 115.485-113.905v-10.848c0-62.908-51.705-113.905-115.485-113.905H328z"></path>
    </svg>
  )
}

export const ItalicIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M634.702 256L487.888 768H658a8 8 0 0 0 8 8v80a8 8 0 0 0-8 8H226a8 8 0 0 0-8-8v-80a8 8 0 0 0 8-8h162.02l146.813-512H366a8 8 0 0 0-8-8v-80a8 8 0 0 0 8-8h432a8 8 0 0 0 8 8v80a8 8 0 0 0-8 8H634.702z"
        p-id="9486"
      ></path>
    </svg>
  )
}

export const UnderlineIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M200 800h624c4.4 0 8 4.32 8 9.6v76.8c0 5.28-3.6 9.6-8 9.6H200c-4.4 0-8-4.32-8-9.6v-76.8c0-5.28 3.6-9.6 8-9.6z m312-72c-69.4 0-134.7-27-183.8-76.2C279.1 602.6 252 537.4 252 468V156c0-6.6 5.4-12 12-12h60c6.6 0 12 5.4 12 12v312c0 97 79 176 176 176s176-79 176-176V156c0-6.6 5.4-12 12-12h60c6.6 0 12 5.4 12 12v312c0 69.4-27 134.7-76.2 183.8C646.6 700.9 581.4 728 512 728z"
        p-id="9620"
      ></path>
    </svg>
  )
}

export const StrikethroughIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M552.545 560H72a8 8 0 0 0-8-8v-80a8 8 0 0 0 8-8h220.18c-9.49-9.775-17.235-20.379-23.392-31.965-11.614-21.98-17.273-46.945-17.273-76.485 0-34.512 6.75-65.842 20.251-92.895 13.203-26.556 32.958-49.332 58.57-67.732C376.199 162.102 441.32 144 513.588 144c79.02 0 144.339 21.284 188.713 61.665 31.667 28.644 52.315 66.837 59.661 110.3 0.695 3.88 1.29 9.25 1.985 16.013v0.995c0 5.57-4.566 10.145-10.125 10.145h-72.765c-4.765 0-9.034-3.382-9.927-8.156-1.49-7.758-2.978-13.725-4.269-17.803-6.452-20.489-17.173-38.193-31.766-52.614-28.69-28.346-70.978-42.768-125.775-42.768-48.047 0-88.45 11.14-116.841 32.126-28.788 21.284-43.977 52.017-43.977 89.016 0 36.8 17.075 64.649 52.216 85.137 24.62 14.223 55.492 24.169 106.815 34.214 3.064 0.607 5.847 1.15 8.89 1.73H952a8 8 0 0 0 8 8v80a8 8 0 0 0-8 8H752.908a138.547 138.547 0 0 0 13.323 20.826C778.242 603.8 784 630.356 784 662.184c0 33.617-6.651 64.45-19.655 91.502-12.906 26.855-32.065 50.128-57.08 69.025C657.827 860.208 587.246 880 503.064 880c-78.423 0-144.735-18.4-191.79-53.21-40.402-29.938-64.227-69.92-70.68-118.755-0.198-1.492-0.396-3.382-0.595-5.67v-0.994c0-5.57 4.566-10.145 10.126-10.145h79.713c4.468 0 8.538 3.083 9.729 7.46 0.993 3.779 1.886 6.763 2.68 8.95 10.523 29.74 30.575 53.212 59.661 69.523 29.484 16.51 66.511 24.964 110.19 24.964 54.897 0 100.065-12.532 130.54-36.402 28.094-21.98 43.58-53.51 43.58-88.817 0-39.784-17.472-68.826-53.308-89.016-14.593-8.156-32.164-15.019-55.194-21.484-7.736-2.163-15.797-4.223-25.172-6.404z"
        p-id="9754"
      ></path>
    </svg>
  )
}

export const CodeIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M553.363 163.663l62.602 13.307q7.825 1.663 6.162 9.488L479.915 855.511q-1.663 7.825-9.488 6.162l-62.602-13.307q-7.825-1.663-6.162-9.488l142.212-669.053q1.663-7.825 9.488-6.162zM712 334.415v81.297a8 8 0 0 1 3.07 6.3L830.062 512 715.07 601.988a8 8 0 0 1-3.07 6.3v81.297a8 8 0 0 1 12.93 6.301l218.96-171.284c6.96-5.444 8.189-15.5 2.744-22.46a16 16 0 0 1-2.744-2.744L724.93 328.114a8 8 0 0 1-12.93 6.301z m-400 0v81.297a8 8 0 0 0-3.07 6.3L193.938 512l114.992 89.988a8 8 0 0 0 3.07 6.3v81.297a8 8 0 0 0-12.93 6.301L80.11 524.602c-6.96-5.444-8.189-15.5-2.744-22.46a16 16 0 0 0 2.744-2.744l218.96-171.284a8 8 0 0 0 12.93 6.301z"
        p-id="9888"
      ></path>
    </svg>
  )
}

export const SubIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M184.182 120.227c-3.132-5.116-8.656-8.227-14.581-8.227H83.194c-3.358 0-6.285 0.852-8.722 2.522l-0.172 0.117-0.177 0.111c-7.908 4.949-10.254 15.391-5.15 23.483l188.57 299.163-3.37 5.37L66.497 741.995c-1.638 2.597-2.496 5.674-2.496 9.04C64 760.344 71.647 768 80.944 768h77.63c5.847 0 11.249-3.052 14.396-8.064l149.665-242.594 8.547 13.929L471.38 759.75c3.052 5.001 8.509 8.024 14.37 8.024h84.381c3.072 0 6.208-0.925 9.314-2.764 7.818-5.128 10.026-15.496 4.957-23.39L391.88 442.366l3.506-5.454L587.28 138.456c1.738-2.756 2.721-6.086 2.721-9.266 0-9.307-7.647-16.965-16.944-16.965h-80.33a17.086 17.086 0 0 1-14.546 8.167L331.876 365.264 184.182 120.227zM704 883.018V952a8 8 0 0 1 8 8h240a8 8 0 0 1 8-8v-64a8 8 0 0 1-8-8H791.103l166.904-189.734a8 8 0 0 1 1.993-5.284V616a8 8 0 0 1-8-8H712a8 8 0 0 1-8 8v64a8 8 0 0 1 8 8h160.897L705.993 877.734a8 8 0 0 1-1.993 5.284z"
        p-id="10022"
      ></path>
    </svg>
  )
}

export const SupIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M184.182 264.227c-3.132-5.116-8.656-8.227-14.581-8.227H83.194c-3.358 0-6.285 0.852-8.722 2.522l-0.172 0.117-0.177 0.111c-7.908 4.949-10.254 15.391-5.15 23.483l188.57 299.163-3.37 5.37L66.497 885.995c-1.638 2.597-2.496 5.674-2.496 9.04C64 904.344 71.647 912 80.944 912h77.63c5.847 0 11.249-3.052 14.396-8.064l149.665-242.594 8.547 13.929L471.38 903.75c3.052 5.001 8.509 8.024 14.37 8.024h84.381c3.072 0 6.208-0.925 9.314-2.764 7.818-5.128 10.026-15.496 4.957-23.39L391.88 586.366l3.506-5.454L587.28 282.456c1.738-2.756 2.721-6.086 2.721-9.266 0-9.307-7.647-16.965-16.944-16.965h-80.33a17.086 17.086 0 0 1-14.546 8.167L331.876 509.264 184.182 264.227zM704 339.031V408a8 8 0 0 1 8 8h240a8 8 0 0 1 8-8v-64a8 8 0 0 1-8-8H792.103L958.98 146.296a8 8 0 0 1 1.993-5.354l-0.607-69.012a8 8 0 0 1-8-7.93H712a8 8 0 0 1-8 8v64a8 8 0 0 1 8 8h161.897L706.01 333.73a8 8 0 0 1-2.01 5.3z"
        p-id="10156"
      ></path>
    </svg>
  )
}

export const CheckIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M357.472 848.422c12.166 0.107 24.365-4.48 33.648-13.763l558.546-558.546c18.35-18.35 18.352-48.11-0.002-66.463l-1.417-1.417c-18.357-18.357-48.11-18.355-66.463-0.002L357.448 732.566 149.67 524.788c-18.352-18.352-48.105-18.353-66.462 0.004l-1.416 1.416c-18.354 18.354-18.356 48.11-0.004 66.462l241.99 241.99c9.294 9.294 21.513 13.882 33.694 13.762z"
        p-id="9084"
      ></path>
    </svg>
  )
}

export const BlockquoteIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M412 205.133c-4.348 0.158-7.873 0.343-10.556 0.554C254.344 217.24 140 340.351 140 488.805v279.04c0 28.72 23.281 52 52 52h168c28.719 0 52-23.28 52-52v-168c0-28.718-23.281-52-52-52H244v-59.04c0-89.924 66.33-165.709 154.528-178.21 3.508-0.497 7.982-0.907 13.472-1.24V205.132z m472 0c-4.348 0.158-7.873 0.343-10.556 0.554C726.344 217.24 612 340.351 612 488.805v279.04c0 28.72 23.281 52 52 52h168c28.719 0 52-23.28 52-52v-168c0-28.718-23.281-52-52-52H716v-59.04c0-89.924 66.33-165.709 154.528-178.21 3.508-0.497 7.982-0.907 13.472-1.24V205.132z"
        p-id="9084"
      ></path>
    </svg>
  )
}

export const UnorderedListIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M360 160h560a8 8 0 0 0 8 8v80a8 8 0 0 0-8 8H360a8 8 0 0 0-8-8v-80a8 8 0 0 0 8-8z m0 304h560a8 8 0 0 0 8 8v80a8 8 0 0 0-8 8H360a8 8 0 0 0-8-8v-80a8 8 0 0 0 8-8z m0 304h560a8 8 0 0 0 8 8v80a8 8 0 0 0-8 8H360a8 8 0 0 0-8-8v-80a8 8 0 0 0 8-8zM96 208a80 80 0 1 1 160 0 80 80 0 1 1-160 0z m0 304a80 80 0 1 1 160 0 80 80 0 1 1-160 0z m0 304a80 80 0 1 1 160 0 80 80 0 1 1-160 0z"
        p-id="9084"
      ></path>
    </svg>
  )
}

export const OrderedListIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M359.68 764h560.64c4.224 0 7.68 4.8 7.68 10.667v74.666c0 5.867-3.456 10.667-7.68 10.667H359.68c-4.224 0-7.68-4.8-7.68-10.667v-74.666c0-5.867 3.456-10.667 7.68-10.667z m0-600h560.64c4.224 0 7.68 4.8 7.68 10.667v74.666c0 5.867-3.456 10.667-7.68 10.667H359.68c-4.224 0-7.68-4.8-7.68-10.667v-74.666c0-5.867 3.456-10.667 7.68-10.667z m0 300h560.64c4.224 0 7.68 4.8 7.68 10.667v74.666c0 5.867-3.456 10.667-7.68 10.667H359.68c-4.224 0-7.68-4.8-7.68-10.667v-74.666c0-5.867 3.456-10.667 7.68-10.667zM172.384 728H99.968c-2.182 0-3.968 1.8-3.968 4v34c0 2.2 1.786 4 3.968 4h72.416v20.5h-35.712c-2.182 0-3.968 1.8-3.968 4v34c0 2.2 1.786 4 3.968 4h35.712V854H99.968c-2.182 0-3.968 1.8-3.968 4v34c0 2.2 1.786 4 3.968 4h116.064c2.182 0 3.968-1.8 3.968-4V732c0-2.2-1.786-4-3.968-4h-43.648zM142 296h40c2.2 0 4-1.8 4-4V136a8 8 0 0 1-8-8h-78c-2.2 0-4 1.8-4 4v36c0 2.2 1.8 4 4 4h38v120c0 2.2 1.8 4 4 4z m74.032 256h-68.448l70.333-77.7c1.29-1.5 2.083-3.4 2.083-5.4V432c0-2.2-1.786-4-3.968-4H99.968c-2.182 0-3.968 1.8-3.968 4v36c0 2.2 1.786 4 3.968 4h68.448l-70.333 77.7c-1.29 1.5-2.083 3.4-2.083 5.4V592c0 2.2 1.786 4 3.968 4h116.064c2.182 0 3.968-1.8 3.968-4v-36c0-2.2-1.786-4-3.968-4z"
        p-id="9352"
      ></path>
    </svg>
  )
}

export const TaskListIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M188 188v648h648V188H188z m-44-76h736c17.673 0 32 14.327 32 32v736c0 17.673-14.327 32-32 32H144c-17.673 0-32-14.327-32-32V144c0-17.673 14.327-32 32-32z m472.227 254.26l-157.21 218.01-71.244-98.796a31.9 31.9 0 0 1-25.868-13.26h-46.907c-6.517 0-10.288 7.415-6.467 12.714L433.147 657.74c12.75 17.681 38.99 17.681 51.738 0L695.47 365.714c3.821-5.3 0.05-12.714-6.467-12.714h-46.907a31.9 31.9 0 0 1-25.868 13.26"
        p-id="9486"
      ></path>
    </svg>
  )
}

export const TableIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M945.08373333 93.85173333L78.91626667 93.85173333c-24.74378667 0-44.80170667 20.05685333-44.80170667 44.80064l0 746.69653334c0 24.74272 20.05792 44.80064 44.80170667 44.80064l866.16746666 0c24.74165333 0 44.80170667-20.05685333 44.80170667-44.80064L989.88586667 138.65173333C989.88586667 113.90826667 969.82506667 93.85173333 945.08373333 93.85173333ZM945.08373333 273.05706667l0 175.07733333-258.85546666 0L686.22826667 273.05706667l214.05226666 0L945.08373333 273.05706667ZM382.57173333 667.17226667L382.57173333 492.93546667l258.85546667 0 0 174.2368L382.57173333 667.17226667ZM641.42826667 711.9744l0 173.37386667L382.57173333 885.34826667 382.57173333 711.9744 641.42826667 711.9744ZM337.77066667 667.17226667l-258.85546667 0L78.9152 492.93546667l258.85546667 0L337.77066667 667.17226667ZM641.42826667 273.05706667l0 175.07733333L382.57173333 448.1344 382.57173333 273.05706667 641.42826667 273.05706667ZM686.22826667 492.93546667l258.85546666 0 0 174.2368-258.85546666 0L686.22826667 492.93546667ZM392.52906667 138.65173333c24.74378667 0 44.80170667 20.05685333 44.80170666 44.80277334 0 24.74272-20.05792 44.80064-44.80170666 44.80064s-44.80277333-20.05685333-44.80277334-44.80064C347.72586667 158.70933333 367.7856 138.65173333 392.52906667 138.65173333ZM258.12373333 138.65173333c24.74165333 0 44.80170667 20.05685333 44.80170667 44.80277334 0 24.74272-20.05898667 44.80064-44.80170667 44.80064-24.74496 0-44.80277333-20.05685333-44.80277333-44.80064C213.3216 158.70933333 233.3792 138.65173333 258.12373333 138.65173333ZM123.7184 138.65173333c24.74165333 0 44.80170667 20.05685333 44.80170667 44.80277334 0 24.74272-20.05898667 44.80064-44.80170667 44.80064-24.74496 0-44.80277333-20.05685333-44.80277333-44.80064C78.91626667 158.70933333 98.97386667 138.65173333 123.7184 138.65173333ZM123.7184 273.05706667l214.05226667 0 0 175.07733333-258.85546667 0L78.91626667 273.05706667 123.7184 273.05706667ZM78.91626667 711.9744l258.85546666 0 0 173.37386667-258.85546666 0L78.91626667 711.9744ZM686.22826667 885.34826667L686.22826667 711.9744l258.85546666 0 0 173.37386667L686.22826667 885.34826667Z"></path>
    </svg>
  )
}

export const TableSplitIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M248 474h136V188H188v124a8 8 0 0 0-8 8h-60a8 8 0 0 0-8-8V144c0-17.673 14.327-32 32-32h284c17.673 0 32 14.327 32 32v736c0 17.673-14.327 32-32 32H144c-17.673 0-32-14.327-32-32V712a8 8 0 0 0 8-8h60a8 8 0 0 0 8 8v124h196V550H248v81.407c0 7.143-8.295 11.194-13.825 6.717L83.27 518.717c-4.36-3.412-4.36-10.022 0-13.434l150.905-119.407c5.636-4.477 13.825-0.426 13.825 6.717V474z m528 76H640v286h196V712a8 8 0 0 0 8-8h60a8 8 0 0 0 8 8v168c0 17.673-14.327 32-32 32H596c-17.673 0-32-14.327-32-32V144c0-17.673 14.327-32 32-32h284c17.673 0 32 14.327 32 32v168a8 8 0 0 0-8 8h-60a8 8 0 0 0-8-8V188H640v286h136v-81.407c0-7.143 8.189-11.194 13.825-6.717L940.73 505.283c4.36 3.412 4.36 10.022 0 13.434L789.825 638.124c-5.53 4.477-13.825 0.426-13.825-6.717V550z"></path>
    </svg>
  )
}

export const TableMergeIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M704 474h132V188H640v124a8 8 0 0 0-8 8h-60a8 8 0 0 0-8-8V144c0-17.673 14.327-32 32-32h284c17.673 0 32 14.327 32 32v736c0 17.673-14.327 32-32 32H596c-17.673 0-32-14.327-32-32V712a8 8 0 0 0 8-8h60a8 8 0 0 0 8 8v124h196V550H704v81.407c0 7.143-8.295 11.194-13.825 6.717L539.27 518.717c-4.36-3.412-4.36-10.022 0-13.434l150.905-119.407c5.636-4.477 13.825-0.426 13.825 6.717V474z m-384 76H188v286h196V712a8 8 0 0 0 8-8h60a8 8 0 0 0 8 8v168c0 17.673-14.327 32-32 32H144c-17.673 0-32-14.327-32-32V144c0-17.673 14.327-32 32-32h284c17.673 0 32 14.327 32 32v168a8 8 0 0 0-8 8h-60a8 8 0 0 0-8-8V188H188v286h132v-81.407c0-7.143 8.189-11.194 13.825-6.717L484.73 505.283c4.36 3.412 4.36 10.022 0 13.434L333.825 638.124c-5.53 4.477-13.825 0.426-13.825-6.717V550z"></path>
    </svg>
  )
}

export const PlusCircleIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
    >
      <path
        d="M279.125333 101.077333a205.226667 205.226667 0 0 0-178.048 178.048C92.544 343.552 85.333333 424.192 85.333333 512c0 87.850667 7.253333 168.448 15.744 232.874667a205.226667 205.226667 0 0 0 178.048 178.048c64.426667 8.533333 145.066667 15.744 232.874667 15.744 87.850667 0 168.448-7.253333 232.874667-15.744a205.226667 205.226667 0 0 0 178.048-178.048c8.533333-64.426667 15.744-145.066667 15.744-232.874667 0-87.850667-7.253333-168.448-15.744-232.874667a205.226667 205.226667 0 0 0-178.048-178.048C680.448 92.544 599.808 85.333333 512 85.333333c-87.850667 0-168.448 7.253333-232.874667 15.744z"
        fill="currentColor"
      ></path>
      <path
        d="M512 725.333333a42.666667 42.666667 0 0 0 42.666667-42.666666v-128h128a42.666667 42.666667 0 1 0 0-85.333334h-128V341.333333a42.666667 42.666667 0 1 0-85.333334 0v128H341.333333a42.666667 42.666667 0 1 0 0 85.333334h128v128a42.666667 42.666667 0 0 0 42.666667 42.666666z"
        fill="#ffffff"
      ></path>
    </svg>
  )
}

export const PlusIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
    >
      <path
        fill="currentColor"
        d="M112 464c-26.51 0-48 21.49-48 48s21.49 48 48 48h352v352c0 26.51 21.49 48 48 48s48-21.49 48-48V560h352c26.51 0 48-21.49 48-48s-21.49-48-48-48H560V112c0-26.51-21.49-48-48-48s-48 21.49-48 48v352H112z"
      ></path>
    </svg>
  )
}

export const ArrowDownIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z"></path>
    </svg>
  )
}

export const ArrowUpIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3c-3.8 5.3-0.1 12.7 6.5 12.7h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path>
    </svg>
  )
}

export const ArrowLeftIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
    </svg>
  )
}

export const ArrowRightIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"></path>
    </svg>
  )
}

export const ArrowCaretDownIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M76.3 392.3l403.1 489.1c16.9 18.9 46.5 18.9 63.4 0l405.1-489.1c24.4-27.4 5-70.8-31.7-70.8H108.1c-36.8 0-56.3 43.4-31.8 70.8z"
        p-id="13314"
      />
    </svg>
  )
}

export const CutIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M891.257 825.643C901.373 835.76 894.26 853 880 853h-90.6a15.87 15.87 0 0 0-11.264-4.65L510.502 580.03l-80.334 80.601C441.812 683.161 448 708.151 448 734c0 88.318-71.682 160-160 160s-160-71.682-160-160 71.682-160 160-160c26.357 0 51.758 6.38 74.494 18.383l80.208-80.386-80.111-80.378C339.855 443.62 314.456 450 288.1 450c-88.318 0-160-71.682-160-160s71.682-160 160-160 160 71.682 160 160c0 25.848-6.188 50.84-17.832 73.369l80.334 80.6 267.559-268.243c2.93-3.072 7.092-4.726 11.339-4.726H880c14.245 0 21.285 17.33 11.264 27.35L578.4 512l312.857 313.643zM288 370c44.1 0 80-35.9 80-80s-35.9-80-80-80-80 35.9-80 80 35.9 80 80 80z m0 444c44.1 0 80-35.9 80-80s-35.9-80-80-80-80 35.9-80 80 35.9 80 80 80z"></path>
    </svg>
  )
}

export const CopyIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M236 701.999h140c23.196 0 42 18.804 42 42V884h242V268H236v433.999z m33.479 68L350 850.519V770h-80.521zM832 64c17.7 0 32 14.3 32 32v728c0 4.4-3.6 8-8 8h-56c-4.4 0-8-3.6-8-8V136H296c-4.4 0-8-3.6-8-8V72c0-4.4 3.6-8 8-8h536zM704 192c17.673 0 32 14.327 32 32v704c0 17.673-14.327 32-32 32H365.255a32 32 0 0 0-22.628-9.373L169.373 777.373A32 32 0 0 0 160 754.745V224c0-17.673 14.327-32 32-32h512z"></path>
    </svg>
  )
}

export const PasteIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M789.24444445 332L789.24444445 182c0-16.5-13.5-30-30-30L549.24444445 152 549.24444445 92c0-33-27-60-60-60l-120 0c-33 0-60 27-60 60l0 60L99.24444445 152c-16.5 0-30 13.5-30 30l0 600c0 16.5 13.5 30 30 30l270 0 0 180 420 0 180-180L969.24444445 332 789.24444445 332zM369.24444445 92.12c0.03-0.03 0.06-0.06 0.12-0.12l119.79 0c0.03 0.03 0.09 0.06 0.12 0.12L489.24444445 152l-120 0L369.24444445 92.12zM189.24444445 272L189.24444445 212l480 0 0 60L189.24444445 272zM789.24444445 907.16L789.24444445 812l95.16 0L789.24444445 907.16zM909.24444445 752l-180 0 0 180L429.24444445 932 429.24444445 392l480 0L909.24444445 752z"></path>
    </svg>
  )
}

export const PasteTextIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M490.66666667 512l0 112.5 28.125 0 28.125-56.25 56.25 0 0 225-42.1875 0 0 56.25 196.875 0 0-56.25-42.1875 0 0-225 56.25 0 28.125 56.25 28.125 0 0-112.5zM771.91666667 343.25l0-140.625c0-15.46875-12.65625-28.125-28.125-28.125l-196.875 0 0-56.25c0-30.9375-25.3125-56.25-56.25-56.25l-112.5 0c-30.9375 0-56.25 25.3125-56.25 56.25l0 56.25-196.875 0c-15.46875 0-28.125 12.65625-28.125 28.125l0 562.5c0 15.46875 12.65625 28.125 28.125 28.125l253.125 0 0 168.75 562.5 0 0-618.75-168.75 0zM378.16666667 118.3625c0.028125-0.028125 0.05625-0.05625 0.1125-0.1125l112.303125 0c0.028125 0.028125 0.084375 0.05625 0.1125 0.1125l0 56.1375-112.5 0 0-56.1375zM209.41666667 287l0-56.25 450 0 0 56.25-450 0zM884.41666667 905.75l-450 0 0-506.25 450 0 0 506.25z"></path>
    </svg>
  )
}

export const DragIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M290 196c54.124 0 98-43.876 98-98S344.124 0 290 0s-98 43.876-98 98 43.876 98 98 98z m0 414c54.124 0 98-43.876 98-98s-43.876-98-98-98-98 43.876-98 98 43.876 98 98 98z m0 414c54.124 0 98-43.876 98-98s-43.876-98-98-98-98 43.876-98 98 43.876 98 98 98z m444-828c54.124 0 98-43.876 98-98S788.124 0 734 0s-98 43.876-98 98 43.876 98 98 98z m0 414c54.124 0 98-43.876 98-98s-43.876-98-98-98-98 43.876-98 98 43.876 98 98 98z m0 414c54.124 0 98-43.876 98-98s-43.876-98-98-98-98 43.876-98 98 43.876 98 98 98z"></path>
    </svg>
  )
}

export const MenuIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path>
    </svg>
  )
}

export const RedoIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M744 321v103.124c0 9.04 10.517 14.168 17.528 8.501l191.326-151.124c5.528-4.318 5.528-12.684 0-17.002L761.528 113.375c-7.146-5.667-17.528-0.54-17.528 8.5V225H411C221.014 225 67 379.014 67 569s154.014 344 344 344h154.272a8 8 0 0 1 8-8v-80a8 8 0 0 1-8-8H411c-136.967 0-248-111.033-248-248 0-136.967 111.033-248 248-248h333z"></path>
    </svg>
  )
}

export const UndoIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M280 321v103.124c0 9.04-10.517 14.168-17.528 8.501L71.146 281.501c-5.528-4.318-5.528-12.684 0-17.002l191.326-151.124c7.146-5.667 17.528-0.54 17.528 8.5V225h333c189.986 0 344 154.014 344 344S802.986 913 613 913H458.728a8 8 0 0 0-8-8v-80a8 8 0 0 0 8-8H613c136.967 0 248-111.033 248-248 0-136.967-111.033-248-248-248H280z"></path>
    </svg>
  )
}

export const LoadingIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      tw="animate-spin"
      {...props}
      viewBox="0 0 1024 1024"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
    </svg>
  )
}

export const HeadingOneIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M138.5 172c0-24.3-19.7-44-44-44s-44 19.7-44 44v680c0 24.3 19.7 44 44 44s44-19.7 44-44V536h400v316c0 24.3 19.7 44 44 44s44-19.7 44-44V172c0-24.3-19.7-44-44-44s-44 19.7-44 44v276h-400V172z m616 362.674h126.828V896H973.5V384h-68.576c-2.949 15.604-9.217 28.769-18.803 39.497-9.586 10.728-21.138 19.505-34.656 26.332-13.519 6.826-28.635 11.702-45.349 14.628s-33.919 4.389-51.616 4.389v65.828z"></path>
    </svg>
  )
}

export const HeadingTwoIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M88 172c0-24.3-19.7-44-44-44S0 147.7 0 172v680c0 24.3 19.7 44 44 44s44-19.7 44-44V536h400v316c0 24.3 19.7 44 44 44s44-19.7 44-44V172c0-24.3-19.7-44-44-44s-44 19.7-44 44v276H88V172z m935.282 724v-73.143H778.388c3.353-10.996 9.576-21.394 18.673-31.193 9.097-9.801 19.75-19.242 31.959-28.325 12.207-9.083 25.493-18.166 39.857-27.249a1121.842 1121.842 0 0 0 43.09-28.684 538.178 538.178 0 0 0 41.653-32.27c13.406-11.473 25.375-24.021 35.908-37.646s18.912-28.564 25.136-44.818 9.336-34.42 9.336-54.498c0-16.254-2.633-33.345-7.9-51.271-5.266-17.929-14.242-34.54-26.931-49.839-12.688-15.298-29.325-27.965-49.912-38.005C918.669 389.02 893.055 384 862.414 384c-28.249 0-53.025 4.9-74.33 14.7-21.306 9.801-39.38 23.306-54.222 40.516-14.843 17.21-25.974 37.647-33.396 61.312-7.42 23.664-11.13 49.358-11.13 77.087h81.87c0.478-17.689 2.274-34.183 5.386-49.48 3.112-15.298 7.9-28.562 14.363-39.798 6.464-11.234 15.082-20.078 25.854-26.533 10.773-6.453 24.299-9.68 40.576-9.68 17.715 0 32.078 2.988 43.09 8.964 11.013 5.976 19.631 13.385 25.854 22.23 6.224 8.843 10.413 18.404 12.568 28.683 2.153 10.278 3.23 19.959 3.23 29.042-0.478 19.6-5.505 36.93-15.081 51.987-9.576 15.061-21.784 29.043-36.626 41.951s-31.121 24.979-48.835 36.213c-17.715 11.234-34.711 22.826-50.99 34.779-33.993 22.946-60.804 49.957-80.434 81.03C690.533 818.077 680.479 854.409 680 896h343.282z"></path>
    </svg>
  )
}

export const HeadingThreeIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M88 172c0-24.3-19.7-44-44-44s-44 19.7-44 44v680c0 24.3 19.7 44 44 44s44-19.7 44-44V536h400v316c0 24.3 19.7 44 44 44s44-19.7 44-44V172c0-24.3-19.7-44-44-44s-44 19.7-44 44v276h-400V172z m727.551 425.803v59.779c15.942-0.468 31.531 0 46.771 1.407 15.238 1.407 28.953 5.041 41.143 10.901 12.191 5.859 22.037 14.418 29.539 25.67s11.253 26.49 11.253 45.715c0 28.132-9.025 49.815-27.076 65.055-18.053 15.236-40.44 22.857-67.166 22.857-31.414 0-54.976-9.963-70.683-29.891-15.707-19.927-23.092-44.895-22.154-74.902h-80.177c0.469 25.789 4.454 49.231 11.956 70.33 7.502 21.1 18.404 39.15 32.704 54.154 14.301 15.003 32.117 26.607 53.451 34.812s46.3 12.31 74.901 12.31c23.444 0 45.715-3.516 66.814-10.55 21.099-7.032 39.619-16.996 55.561-29.89 15.942-12.894 28.602-28.601 37.979-47.121 9.377-18.521 14.064-39.502 14.064-62.945 0-31.883-7.853-58.96-23.56-81.23s-37.627-36.22-65.759-41.846v-1.407c23.912-8.44 41.495-21.92 52.747-40.439 11.254-18.521 16.88-40.205 16.88-65.056 0-21.567-4.454-40.673-13.363-57.317-8.908-16.646-20.747-30.359-35.517-41.144-14.77-10.783-31.414-18.988-49.935-24.614-18.521-5.628-37.393-8.44-56.616-8.44-24.851 0-47.122 4.22-66.813 12.659-19.693 8.439-36.455 20.161-50.287 35.165-13.831 15.004-24.733 32.703-32.703 53.099-7.971 20.396-12.425 42.549-13.363 66.462h80.178c-0.471-12.66 0.937-24.967 4.22-36.923 3.281-11.957 8.322-22.74 15.121-32.352 6.798-9.612 15.354-17.231 25.67-22.857 10.315-5.627 22.506-8.44 36.572-8.44 22.506 0 40.909 6.329 55.21 18.989 14.3 12.66 21.45 29.538 21.45 50.639 0 15.003-3.164 27.662-9.494 37.978s-14.652 18.403-24.969 24.263c-10.314 5.861-22.035 9.964-35.165 12.309-13.127 2.341-26.256 3.279-39.384 2.811z"></path>
    </svg>
  )
}

export const HeadingFourIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M88 171.846c0-24.3-19.7-44-44-44s-44 19.7-44 44v680c0 24.3 19.7 44 44 44s44-19.7 44-44v-316h400v316c0 24.3 19.7 44 44 44s44-19.7 44-44v-680c0-24.3-19.7-44-44-44s-44 19.7-44 44v276h-400v-276z m936.246 607.56V716.11h-63.298V403.846h-75.957L674 699.934v79.473h210.991v116.748h75.957V779.406h63.298zM883.584 499.494h1.406V716.11h-149.1l147.694-216.616z"></path>
    </svg>
  )
}

export const HeadingFiveIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M743.137 393.923l-52.748 269.363h80.178c6.562-17.348 17.229-29.188 32-35.517 14.77-6.33 30.592-9.495 47.473-9.495 15.941 0 29.891 2.813 41.846 8.439 11.957 5.626 21.686 13.128 29.188 22.506 7.502 9.377 13.129 20.278 16.879 32.703 3.752 12.425 5.627 25.437 5.627 39.033 0 15.004-1.523 29.069-4.572 42.198-3.047 13.128-8.205 24.615-15.471 34.461-7.268 9.847-16.764 17.583-28.484 23.209-11.723 5.627-26.021 8.438-42.902 8.438-26.256 0-47.355-7.149-63.297-21.449-15.941-14.301-25.084-34.813-27.43-61.538h-80.176c0.938 24.85 5.977 46.534 15.121 65.054 9.143 18.52 21.451 34.11 36.924 46.77 15.471 12.659 33.406 22.153 53.801 28.483 20.396 6.33 42.551 9.495 66.463 9.495 30.01 0 55.797-5.509 77.363-16.528 21.568-11.018 39.27-25.084 53.102-42.196 13.832-17.114 23.91-36.104 30.24-56.968s9.494-41.143 9.494-60.836c0-23.442-3.396-45.245-10.197-65.405-6.799-20.161-16.762-37.627-29.891-52.396-13.127-14.77-29.303-26.256-48.527-34.461-19.225-8.206-41.025-12.309-65.406-12.309-16.412 0-32.939 3.165-49.584 9.495s-30.359 15.59-41.145 27.78l-1.406-1.407 25.32-125.187h194.814v-71.736H743.135h0.002z m-654.891-222c0-24.3-19.7-44-44-44s-44 19.7-44 44v680c0 24.3 19.7 44 44 44s44-19.7 44-44v-316h400v316c0 24.3 19.7 44 44 44 24.299 0 44-19.7 44-44v-680c0-24.3-19.701-44-44-44-24.3 0-44 19.7-44 44v276h-400v-276z"
        p-id="5701"
      ></path>
    </svg>
  )
}

export const HeadingSixIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M88 172c0-24.3-19.7-44-44-44S0 147.7 0 172v680c0 24.3 19.7 44 44 44s44-19.7 44-44V536h400v316c0 24.3 19.7 44 44 44s44-19.7 44-44V172c0-24.3-19.7-44-44-44s-44 19.7-44 44v276H88V172z m846.736 346.33h80.127c-0.938-20.162-5.623-38.447-14.059-54.857-8.434-16.41-19.328-30.477-32.683-42.197-13.355-11.723-28.7-20.865-46.038-27.43-17.337-6.563-35.847-9.846-55.527-9.846-34.675 0-63.843 7.736-87.507 23.209-23.664 15.472-42.758 35.516-57.284 60.132-14.525 24.615-24.95 51.926-31.276 81.935-6.326 30.008-9.489 59.779-9.489 89.317 0 36.103 2.577 69.743 7.732 100.923 5.153 31.18 14.407 58.375 27.763 81.584 13.354 23.209 31.629 41.493 54.824 54.856C794.513 889.318 824.151 896 860.232 896c24.365 0 46.623-4.221 66.771-12.659 20.149-8.44 37.486-20.278 52.012-35.517 14.527-15.238 25.655-33.055 33.388-53.45 7.73-20.396 11.597-42.55 11.597-66.462 0-23.443-3.514-45.245-10.543-65.407-7.029-20.161-17.22-37.625-30.574-52.396-13.354-14.769-29.638-26.372-48.85-34.812-19.212-8.439-41.001-12.66-65.367-12.66-22.023 0-42.523 4.807-61.501 14.418-18.979 9.612-33.855 24.264-44.632 43.957l-1.406-1.408a4775.706 4775.706 0 0 1 3.163-34.812c1.171-12.425 3.163-24.966 5.974-37.626 2.812-12.66 6.443-24.733 10.896-36.22 4.451-11.487 10.309-21.685 17.571-30.595 7.264-8.907 16.166-16.058 26.71-21.449 10.543-5.393 23.076-8.089 37.603-8.089 21.086 0 37.838 6.214 50.255 18.638 12.417 12.425 19.562 28.717 21.437 48.879zM857.42 829.188c-14.525 0-27.295-2.813-38.306-8.44-11.013-5.627-20.267-13.245-27.765-22.856-7.496-9.613-13.119-20.514-16.867-32.703-3.749-12.191-5.623-25.084-5.623-38.683 0-13.597 1.873-26.491 5.623-38.681 3.748-12.19 9.371-22.857 16.867-32 7.498-9.143 16.752-16.41 27.765-21.803 11.011-5.392 23.779-8.088 38.306-8.088s27.178 2.813 37.955 8.44c10.777 5.626 19.797 13.011 27.06 22.153 7.264 9.143 12.652 19.81 16.166 32 3.516 12.19 5.272 24.85 5.272 37.978 0 13.129-1.757 25.905-5.272 38.33-3.514 12.425-8.902 23.326-16.166 32.703-7.263 9.378-16.282 16.997-27.06 22.858-10.777 5.861-23.429 8.792-37.955 8.792z"></path>
    </svg>
  )
}

export const LinkIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M555.149 690.9c15.63-15.631 40.97-15.631 56.601 0 15.63 15.629 15.63 40.969 0 56.6l-140.7 140.699c-92.6 92.601-242.6 92.601-335.2 0-92.6-92.6-92.6-242.6 0-335.199l140.7-140.7c15.63-15.63 40.97-15.63 56.6 0 15.63 15.63 15.63 40.97 0 56.6l-140.7 140.7c-61.3 61.301-61.3 160.7 0 222 61.3 61.301 160.7 61.301 222 0l140.699-140.7z m333-219.9l-140.7 140.699c-15.63 15.631-40.97 15.631-56.6 0-15.63-15.629-15.63-40.97 0-56.6l140.7-140.7c61.3-61.3 61.3-160.699 0-222-61.3-61.3-160.7-61.3-222 0l-140.7 140.7c-15.63 15.63-40.97 15.63-56.6 0-15.63-15.63-15.63-40.97 0-56.6l140.699-140.7c92.601-92.6 242.601-92.6 335.2 0 92.602 92.501 92.602 242.6 0.001 335.201zM320.35 703.6c-17.2-17.199-17.2-45.1 0-62.199l321-321.001c17.2-17.199 45-17.199 62.2 0 17.2 17.2 17.2 45 0 62.2l-321 321c-17.2 17.2-45 17.2-62.2 0z"></path>
    </svg>
  )
}

export const UnLinkIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M693.024 589.248a32 32 0 0 1-22.624-54.624l90.496-90.496a128 128 0 1 0-181.024-181.024l-90.496 90.496a32 32 0 1 1-45.248-45.248l90.496-90.496a192 192 0 0 1 271.52 271.52l-90.496 90.496a32 32 0 0 1-22.624 9.376zM353.6 862.272a192 192 0 0 1-135.744-327.648l90.496-90.496a32 32 0 1 1 45.248 45.248l-90.496 90.496a128 128 0 0 0 181.024 181.024l90.496-90.496a32 32 0 1 1 45.248 45.248l-90.496 90.496a191.488 191.488 0 0 1-135.776 56.128zM832 864a32 32 0 0 1-22.624-9.376l-640-640a32 32 0 0 1 45.248-45.248l640 640A32 32 0 0 1 832 864z"></path>
      <path d="M384 672a32 32 0 0 1-22.624-54.624l64-64a32 32 0 0 1 45.248 45.248l-64 64A32 32 0 0 1 384 672zM576 480a32 32 0 0 1-22.624-54.624l64-64a32 32 0 0 1 45.248 45.248l-64 64A32 32 0 0 1 576 480z"></path>
    </svg>
  )
}

export const ImageIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg
      {...props}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path d="M136 792V671.745l132.424-157.033c3.197-3.79 9.035-3.79 12.232 0L424.622 685.43l227.343-269.587c3.197-3.79 9.035-3.79 12.232 0L888 681.232V792 232H136v560zM96 160h832c17.673 0 32 14.327 32 32v640c0 17.673-14.327 32-32 32H96c-17.673 0-32-14.327-32-32V192c0-17.673 14.327-32 32-32z m208 288c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z"></path>
    </svg>
  )
}

export const ZoomInIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
    </svg>
  )
}

export const ZoomOutIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
    </svg>
  )
}

export const OneToOneIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M316 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8zM512 622c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39zM512 482c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39z"></path>
      <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z"></path>
      <path d="M648 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8z"></path>
    </svg>
  )
}

export const RotateLeftIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326z"></path>
      <path d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z"></path>
    </svg>
  )
}

export const RotateRightIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"></path>
      <path d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z"></path>
    </svg>
  )
}

export const DownloadIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M488.5 784.35l-155.8-155.9c-13.4-13.5-13.4-35.4 0.1-48.9 13.4-13.5 35.3-13.5 48.8 0l96.9 96.9V98.649c0-19.1 15.5-34.6 34.6-34.6 19.101 0 34.601 15.5 34.601 34.6V676.45l96.899-96.9c6.5-6.5 15.2-10.1 24.4-10.1s17.9 3.6 24.4 10.1c13.5 13.5 13.5 35.4 0 48.9l-155.9 155.9c-6.8 6.7-15.6 10.101-24.5 10.101s-17.8-3.401-24.5-10.101z m436.9-143.9c19.1 0 34.6 15.5 34.6 34.5v222.9c0 34.2-27.8 62.101-62.1 62.101H126.1c-34.2 0-62.1-27.8-62.1-62.101v-222.9c0-19 15.4-34.601 34.5-34.601s34.6 15.5 34.6 34.601v195.5c0 11.399 9.3 20.6 20.6 20.6h716.5c11.399 0 20.6-9.3 20.6-20.6v-195.4c0-19.1 15.5-34.6 34.6-34.6z"></path>
    </svg>
  )
}

export const CloseIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M893.9 826c18.699 18.8 18.699 49.2 0 67.9-18.801 18.699-49.2 18.699-67.9 0l-314-314-314 314c-18.8 18.699-49.2 18.699-67.9 0-18.7-18.801-18.7-49.2 0-67.9l314-314-314-314c-18.7-18.8-18.7-49.2 0-67.9 18.8-18.699 49.2-18.699 67.9 0l314 314 314-314c18.8-18.699 49.2-18.699 67.9 0 18.699 18.801 18.699 49.2 0 67.9l-314 314 314 314z"></path>
    </svg>
  )
}

export const HrIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M912 472v80a8 8 0 0 0-8 8H120a8 8 0 0 0-8-8v-80a8 8 0 0 0 8-8h784a8 8 0 0 0 8 8z"></path>
    </svg>
  )
}

export const AlignLeftIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M120 160h496q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z m0 405.333h496q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8zM120 768h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z m0-405.333h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z" />
    </svg>
  )
}

export const AlignCenterIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M264 160h496q8 0 8 8v80q0 8-8 8H264q-8 0-8-8v-80q0-8 8-8z m0 405h496q8 0 8 8v80q0 8-8 8H264q-8 0-8-8v-80q0-8 8-8zM120 768h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z m0-405h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z" />
    </svg>
  )
}

export const AlignRightIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M408 160h496q8 0 8 8v80q0 8-8 8H408q-8 0-8-8v-80q0-8 8-8z m0 405.333h496q8 0 8 8v80q0 8-8 8H408q-8 0-8-8v-80q0-8 8-8zM120 768h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z m0-405.333h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z" />
    </svg>
  )
}

export const AlignJustifyIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M120 160h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z m0 405.333h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8zM120 768h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z m0-405.333h784q8 0 8 8v80q0 8-8 8H120q-8 0-8-8v-80q0-8 8-8z" />
    </svg>
  )
}

export const LeadingIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M469.333333 170.666667h426.666667v85.333333H469.333333V170.666667zM256 298.666667v170.666666H170.666667V298.666667H42.666667l170.666666-170.666667 170.666667 170.666667H256z m0 426.666666h128l-170.666667 170.666667-170.666666-170.666667h128v-170.666666h85.333333v170.666666z m213.333333 42.666667h426.666667v85.333333H469.333333v-85.333333z m-85.333333-298.666667h512v85.333334H384v-85.333334z" />
    </svg>
  )
}

export const FontColorIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M572.885333 197.290667A42.752 42.752 0 0 0 533.333333 170.666667h-42.666666a42.666667 42.666667 0 0 0-39.509334 26.624L170.666667 853.333333h86.528l93.866666-213.333333h322.133334l93.994666 213.333333H853.333333L572.885333 197.290667zM388.608 554.666667L512 274.176 635.562667 554.666667H388.608z" />
    </svg>
  )
}

export const BackgroundColorIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path
        d="M982.175 427.175l-375.5 375.399c-18.2 18.201-44.399 23.201-67.1 14.9l-76.8 76.801c-26.5 26.6-67.2 30.5-97.9 11.799l-40.7 40.701c-4.5 4.5-10.7 7-17.1 7l-279.4-1.301c-14.8 0-26.9-12.1-26.8-27 0-7.199 2.9-14 7.9-19l178.3-178.299c-18.7-30.801-14.7-71.4 11.8-97.9l76.8-76.801c-8.2-22.5-3.3-48.799 14.9-67l375.5-375.3c54.6-54.601 143-54.601 197.6 0l118.5 118.399c54.6 54.602 54.6 143.102 0 197.602z m-498.2 344.3l-162.3-162.199-60.7 60.699c-9.4 9.301-9.4 24.4 0 33.801l128.5 128.4c9.2 9.398 24.4 9.398 33.8 0l60.7-60.701z m359.9-307.6l-214.7-214.5-282.2 282.199 214.6 214.5 282.3-282.199z m84.6-186.3l-112.899-112.8c-28-28-73.601-28-101.601 0l-33.8 33.8 214.601 214.5 33.8-33.8c27.999-28.1 27.999-73.6-0.101-101.7z"
        p-id="10437"
      ></path>
    </svg>
  )
}

export const CodeBlockIcon: React.FC<React.HTMLAttributes<SVGSVGElement>> = props => {
  return (
    <svg {...props} viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M148.7 510.449c59.2 32.5 95.8 94.301 95.8 161.501v121.4c0 38.5 28.7 70.9 66.9 75.5l60.2 7.301c24.1 3 41.3 24.9 38.4 49-3 24.1-24.9 41.3-49 38.4l-60.2-7.301c-82.4-9.9-144.4-79.8-144.4-162.8v-121.7c0-35-19.1-67.199-49.8-84.1l-66.3-36.4c-5.1-2.801-8.3-8.199-8.3-14v-58.5c0-6.2 3.5-11.9 9.1-14.5l61.3-29.101c33-16.1 53.9-49.6 53.9-86.3v-118.7c0-83 62-152.899 144.4-162.8l60.2-7.3c24.2-2.9 46.1 14.3 49 38.399 2.899 24.2-14.3 46.101-38.4 49l-60.2 7.301c-38.2 4.699-66.9 37-66.9 75.5v118.699c0 67.501-37 129.402-95.7 161.501zM992 478.85v58.6c0 5.801-3.2 11.201-8.3 14l-66.2 36.4c-30.7 16.801-49.8 49.101-49.8 84.101V793.85c0 83-62 152.9-144.3 162.801l-60.101 7.3c-24.1 2.899-46-14.3-48.899-38.399-2.9-24.201 14.3-46.101 38.399-49l60.101-7.301c38.199-4.699 66.899-37 66.899-75.5v-121.7c0-67.201 36.5-129 95.7-161.501-58.8-32.2-95.7-94-95.7-161.5v-118.7c0-38.5-28.7-70.9-66.899-75.5l-60.101-7.3c-24.1-3-41.3-24.9-38.399-49 2.899-24.101 24.8-41.3 48.899-38.4l60.101 7.3c82.3 9.9 144.3 79.801 144.3 162.801V348.95c0 36.7 20.899 70.2 53.899 86.301l61.301 29.1c5.5 2.699 9.1 8.298 9.1 14.499z" />
    </svg>
  )
}

export const IconMap = {
  bold: BoldIcon,
  italic: ItalicIcon,
  underline: UnderlineIcon,
  strikethrough: StrikethroughIcon,
  code: CodeIcon,
  sub: SubIcon,
  sup: SupIcon,
  check: CheckIcon,
  blockquote: BlockquoteIcon,
  unorderedList: UnorderedListIcon,
  orderedList: OrderedListIcon,
  taskList: TaskListIcon,
  table: TableIcon,
  tableMerge: TableMergeIcon,
  tableSplit: TableSplitIcon,
  plus: PlusIcon,
  plusCircle: PlusCircleIcon,
  arrowDown: ArrowDownIcon,
  arrowUp: ArrowUpIcon,
  arrowLeft: ArrowLeftIcon,
  arrowRight: ArrowRightIcon,
  arrowCaretDown: ArrowCaretDownIcon,
  copy: CopyIcon,
  cut: CutIcon,
  paste: PasteIcon,
  pasteText: PasteTextIcon,
  drag: DragIcon,
  menu: MenuIcon,
  redo: RedoIcon,
  undo: UndoIcon,
  loading: LoadingIcon,
  headingOne: HeadingOneIcon,
  headingTwo: HeadingTwoIcon,
  headingThree: HeadingThreeIcon,
  headingFour: HeadingFourIcon,
  headingFive: HeadingFiveIcon,
  headingSix: HeadingSixIcon,
  link: LinkIcon,
  unLink: UnLinkIcon,
  image: ImageIcon,
  zoomIn: ZoomInIcon,
  zoomOut: ZoomOutIcon,
  oneToOne: OneToOneIcon,
  rotateLeft: RotateLeftIcon,
  rotateRight: RotateRightIcon,
  download: DownloadIcon,
  close: CloseIcon,
  hr: HrIcon,
  alignLeft: AlignLeftIcon,
  alignCenter: AlignCenterIcon,
  alignRight: AlignRightIcon,
  alignJustify: AlignJustifyIcon,
  leading: LeadingIcon,
  fontColor: FontColorIcon,
  backgroundColor: BackgroundColorIcon,
  codeBlock: CodeBlockIcon,
}

export type IconName = keyof typeof IconMap

const IconStyles = styled.span`
  ${tw`leading-[0] inline-block text-center align-[-.125rem] text-inherit font-normal`}
  > svg {
    ${tw`inline-block align-[unset]`}
  }
`

export const Icon: React.FC<React.HTMLAttributes<SVGSVGElement> & Record<'name', IconName>> = ({
  name,
  className,
  ...props
}) => {
  const IconComponent = IconMap[name]

  return (
    <IconStyles className={className}>
      <IconComponent {...props} />
    </IconStyles>
  )
}

export const IconCustom: React.FC<React.HTMLAttributes<SVGSVGElement>> = ({
  className,
  children,
}) => {
  return <IconStyles className={className}>{children}</IconStyles>
}
